﻿<!--
-----------------------------------------------------------------------------------
<copyright file="About.html" company="Microsoft Corporation">
         (c) © 2016 Microsoft. All rights reserved.

</copyright>
---------------------------------------------------------------------------------
-->

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/StaticPages.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

    <title>CheckMyCode - About</title>
    <meta charset="utf-8" />
</head>
<body>
    <header class="header">
        <h1 class="pageHeader">About</h1>
        <nav role="navigation"></nav>
        <script>
            $("nav").load("LoadHTML/Navigation.html");
        </script>
    </header>
    <br />
    <main class="main" id="aboutTop">
        <div class="info">
            <h2 class="sectionHeader">Skip to sections</h2>
            <ul class="skipToLinks">
                <li><a href="#introContact" title="Introduction and Contact">Introduction and Contact</a></li>
                <li><a href="#creators" title="Creators">Creators</a></li>
                <li><a href="#functionality" title="Functionality">Functionality</a></li>
                <li><a href="#extraDetails" title="Extra Details">Extra Details</a></li>
                <li><a href="#versionInfo" title="Version Information">Version Information</a></li>
            </ul>
        </div>
        <div class="info" id="introContact">
            <h2 class="sectionHeader">Introduction and Contact</h2>
            <p class="infoText">
                CheckMyCode is the complete package and solves some of the biggest problems that computer science students face. 
                Using the website will build students’ confidence, making them more likely to stay with computer science 
                and pursue a career in the field. It also saves time for teachers and students, so they can focus 
                on learning what matters: the concepts.
            </p>
            <p class="infoText">
                If you have any questions, comments, or suggestions please email <span class="bold">
                checkmycode@outlook.com</span>. Responses will typically be fast. If you notice that
                an error has no info then please send the complete text of the error in your email.
                If you have any comments about the content on the site then please send the content
                in question in your email as well as the confusion or concern about the information.
                This site is intended to help as many people as possible, and your feedback is greatly
                appreciated. <span class="italic">If you are interested in contributing to this project, 
                email to the same address and terms can be negotiated.</span>
            </p>
            <a href="#aboutTop">Back to top</a>
        </div>
        <div class="info" id="creators">
            <h2 class="sectionHeader">Creators</h2>
            <p class="infoText">
                This site was created by Vinny Palaniappan. He graduated from Issaquah High School and is currently
                attending the University of Washington, studying Computer Science. He first started coding in his 
                AP Computer Science class. This project was started during his internship at Microsoft. Besides 
                CS he is interested in politics and science.
            </p>
            <p class="infoText">
                The project took just under two months before its initial release. Many people helped along the way: Dale
                Lemieux, Kirk Tarrach, Elizabeth McKinnie, Hyoju Claire Kim, Alexandra Ash, Kristin Yim, Jeff Manipon, Andrew
                Craswell, Matan Lehrer, Jason Ament, Soubhagya Kumar Jena, and more. A special thanks to Microsoft for funding
                this site and making it usable by everyone.
            </p>
            <a href="#aboutTop">Back to top</a>
        </div>
        <div class="info" id="functionality">
            <h2 class="sectionHeader">Functionality</h2>
            <p class="infoText">
                The IDE (Interactive Development Environment) is the main feature of the website, and has many functions that 
                allows anyone to practice proper programming. Any error messages that are given can be clicked on to receive 
                more information about the error, why the error may have occurred, and how to fix it. The IDE has syntax 
                highlighting and intuitive keyboard commands, as well as multiple tabs that can communicate with each other 
                (for good object oriented programming practice). You can download code as a zip or .java file and open java 
                files in the site. NOTE: _J_A_V_A__S_E_C_U_R_I_T_Y_ file you may see in the stack trace when you get
                a run time error is simply a file used for security purposes. Simply ignore its existence.
            </p>
            <p class="infoText">
                Practice problems provide opportunities to solve problems and provide hints, as well as possible solutions. 
                Example problems walk students through the process of solving a problem step by step, and include helpful 
                notes that get students thinking like computer scientists. Video lessons, provided by CS Homework Bytes, 
                review concepts and provide a different way of presenting example problems. Also included in the website are 
                advice and tips from former students, important terms with clear and simple definitions, standard programming 
                constructions/principles, and a mini API so students can see the important methods and classes and not get 
                caught up in the full API when they start out.
            </p>
            <a href="#aboutTop">Back to top</a>
        </div>
        <div class="info" id="extraDetails">
            <h2 class="sectionHeader">Extra Details</h2>
            <p class="infoText">
                The site was created using HTML + ARIA (for accessibility), CSS, Javascript, C#, and Java using
                the .NET framework. JSON objects were used and manipulated as well. The site essentially receives
                the tabs and code that was written in the form of a JSON object. Security checks happen and then
                the object is processed and then the code of the current tab and its dependencies are compiled.
                If there are errors it is returned back to the user. If not, then the code is run and the output
                and any exceptions that occured are returned back to the user in the form of a JSON object.
            </p>
            <p class="infoText">
                All of the external tools used in this site are open source: jQuery, jQuery UI, jQuery UI CSS, 
                Ace Editor, JS Zip, Filesaver.js, and JS Beautifier. The website has been implemented with multiple 
                layers of security to ensure the safety of the server. It’s continuously being worked on, and we 
                are open to any feedback or suggestions. Restrictions include, but not limited to: network access, 
                file manipulation, and sending excessive information to the server.
            </p>
            <p class="infoText">
                This site has been optimized for and tested with Google Chrome, Microsoft Edge, and Mozilla Firefox.
                Other browsers, such as Internet Explorer work to a large extent, but there are some functions, such
                as the 'open file' button, that may not work. Code is saved in local storage, so clearing the cache
                will result in the loss of saved work, so when returning to the website the initial page will be
                displayed.
            </p>
            <a href="#aboutTop">Back to top</a>
        </div>
        <div class="info" id="versionInfo">
            <h2 class="sectionHeader">Version information</h2>
            <p class="introText version">
                <script>
                    $("p.version").load("LoadHTML/VersionInfo.html");
                </script>
            </p>
            <a href="#aboutTop">Back to top</a>
        </div>
    </main>
    <br />
    <footer role="contentinfo">
        <script>
            $("footer").load("LoadHTML/Footer.html");
        </script>
    </footer>
</body>
</html>